<template>
	<div class="bodyD">
		<!-- 单列带划线价-->
		<div class="bigBox" v-if="flex == '1'">
			<div class="box" v-for="(item, index) in productdata" :key="index" @click="goDetail(item)">
				<div class="imgBox">
					<img :src="item.goodsMainPhotoUrl" />
				</div>
				<div class="titleBox">{{ item.goodsName }}</div>
				<div class="priceBox">
					<div class="newP"><span class="tipPrice">¥</span>{{ item.goodsPriceBean.price | priceFilter() }}</div>
					<div class="oldP">¥{{ item.goodsPriceBean.originalPrice | priceFilter() }}</div>
<!--					<div style="margin-left:3px;margin-top:5px;">-->
<!--						<activityIcon type='1' :acType="item.acType"></activityIcon>-->
<!--					</div>-->
				</div>
<!--				<div class="activityTip">-->
<!--					<div v-if="item.subsidiaryAcTypeList.length != 0" class="sideshow">-->
<!--						<div class="sideshowList" v-for="(subsidiaryAcType, index) in item.subsidiaryAcTypeList" :key="index">	-->
<!--							{{subsidiaryAcType}}-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
			</div>
		</div>
		<!-- 两列带划线价  -->
		<div class="smallBox" v-if="flex == '2'">
			<div class="box" v-for="(item, index) in productdata" :key="index" @click="goDetail(item)">
				<div class="imgBox">
					<img :src="item.goodsMainPhotoUrl" />
				</div>
				<div class="textBox">
					<div class="textTitle"><span>{{ item.goodsName }}</span></div>
					<!-- <div class="sideshow">{{item.subsidiaryAcTypeList}}</div> -->
					<div class="textPriceZ">
						<div style="display: inline-block;margin-right: 5px;">
						<span class="tipPrice">￥</span>{{ item.goodsPriceBean.price  | priceFilter()}}</div>
						<activityIcon class="zhdbs2" type='1' :acType="item.acType"></activityIcon>
					</div>
					<div class="textPriceY">
						<span class="tipPrice">￥</span>{{ item.goodsPriceBean.originalPrice | priceFilter() }}</span>
					</div>
<!--					<div class="activityTip">-->
<!--						<div v-if="item.subsidiaryAcTypeList.length != 0" class="sideshow">-->
<!--							<div class="sideshowList" v-for="(subsidiaryAcType, index) in item.subsidiaryAcTypeList" :key="index">	-->
<!--								{{subsidiaryAcType}}-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
				</div>
			</div>
		</div>
		<!-- 折扣活动 -单列-立即抢购 -->
		<div v-if="flex == '3'" class="listBox">
			<div class="list" v-for="(item, index) in productdata" :key="item.id">
				<div class="l_imgBox" @click="goDetail(item)">
					<img :src="item.goodsMainPhotoUrl" />
				</div>
				<div class="l_textBox">
					<div class="l_textBoxT" @click="goDetail(item)">
						<span class="l_TextBoxTitle">{{ item.goodsName }}</span>
					</div>
					<div class="l_textBoxPN">
						<div class="l_textBoxPNT" @click="goDetail(item)">
							<div class="l_TextBoxPrice"><span class="tipPrice">￥</span>{{ item.goodsPriceBean.price | priceFilter() }}</div>
							<span class="l_TextBoxNumm"><span class="tipPrice">￥</span>{{ item.goodsPriceBean.originalPrice || priceFilter() }}</span>
						</div>
						<div class="l_textBoxPNB" @click="toBuy(item)">立即抢购</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 秒杀活动-单列- -->
		<div class="listBox1" v-if="flex == '4'">
			<!-- 每个商品 -->
			<div class="list" v-for="(item, index) in productdata" :key="item.id">
				<div class="l_imgBox" @click="goDetail(item)">
					<img :src="item.goodsMainPhotoUrl" />
				</div>
				<div class="l_textBox">
					<div class="l_textBoxT" @click="goDetail(item)">
						<span class="l_TextBoxTitle">{{ item.goodsName }}</span>
					</div>
					<div class="l_textBoxPN">
						<div class="l_textBoxPNT">
							<div class="l_TextBoxP" @click="goDetail(item)">
								<span class="l_TextBoxPrice"><span class="tipPrice">￥</span>{{ item.goodsPriceBean.price | priceFilter() }}</span>
								<span class="l_TextBoxNumm"><span class="tipPrice">￥</span>{{ item.goodsPriceBean.originalPrice| priceFilter() }}</span>
							</div>
							<div class="l_textBoxPercentage">
								</div>
						</div>
						<div class="l_textBoxPNBY" v-if="item.identification==0" @click="toBuy(item)">已结束</div>
						<div class="l_textBoxPNB" v-if="item.identification==1" @click="toBuy(item)">立即秒杀</div>
						<div class="l_textBoxPNB" v-if="item.identification==2" @click="toBuy(item)">即将开始</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 拼团活动 -->
		<div class="listBox2" v-if="flex == '5'">
			<div class="list" v-for="(item, index) in productdata" :key="item.id">
				<div class="l_imgBox" @click="goDetail(item)">
					<img :src="item.goodsMainPhotoUrl" />
				</div>
				<div class="l_textBox">
					<div class="l_textBoxT" @click="goDetail(item)">
						<span class="l_TextBoxTitle">{{ item.goodsName }}</span>
					</div>
					<div class="l_textBoxPN">
						<div class="l_textBoxPNBtn">
							<div >
								<div class="l_TextBoxPrice"><span class="tipPrice">￥</span>{{ item.goodsPriceBean.price| priceFilter() }}</div>
								<!-- <span class="l_TextBoxNumm">已拼{{item.alreadySpellNum}}件</span> -->
							</div>
							<div  class="collageBtn" @click="goDetail(item)">
								立即拼团
							</div>
						</div>


					</div>
				</div>
			</div>
		</div> 
		<!-- 两列 单价格 -->
		<div class="guess-section" v-if="flex == '6'">
			<div v-for="(item, index) in productdata" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<div class="image-wrapper">
					<img :src="item.goodsMainPhotoUrl" mode="aspectFill" />

					</div>
				<span class="title clamp">{{ item.goodsName }}</span>
				<div class="price">
					<!-- <div v-if="item.showPrice" style="display: inline-block;">
						<div style="display: inline-block;">
							<span class="tipPrice">￥</span>{{ item.showPrice }}</div>
					</div> -->
					<div v-if="item.price">
						<div style="display: inline-block;">
							<span class="tipPrice">￥</span>{{ item.price| priceFilter() }}
						</div>
					</div>
					<div style="margin-left: 10px;">
						<activityIcon type='1' :acType="item.acType"></activityIcon>
					</div>
					<!-- <div v-if="item.subsidiaryAcTypeList.length != 0" class="sideshow">
						<div class="sideshowList" v-for="(subsidiaryAcType, index) in item.subsidiaryAcTypeList" :key="index">	
							{{subsidiaryAcType}}
						</div>
					</div> -->
				</div>
				<div class="activityTip">
					<div v-if="item.subsidiaryAcTypeList.length != 0" class="sideshow">
						<div class="sideshowList" v-for="(subsidiaryAcType, index) in item.subsidiaryAcTypeList" :key="index">	
							{{subsidiaryAcType}}
						</div>
					</div>
				</div>
			</div>
		</div>
<!--		三列 单价格-->
		<div class="guess-section" v-if="flex == '7'">
			<div v-for="(item, index) in productdata" :key="index" class="guess-itemA" @click="navToDetailPage(item)">
				<div class="image-wrapperA">
					<img :src="item.goodsMainPhotoUrl" mode="aspectFill" />
					</div>
				<span class="title clamp">{{ item.goodsName }}</span>
				<div class="price">
					<div style="display: inline-block;margin-right: 2px;">
						<span class="tipPrice">￥</span>{{ item.price| priceFilter()}}</div>
				</div>
			</div>
		</div>
<!--		四列单价格-->
		<div class="guess-section" v-if="flex == '8'">
			<div v-for="(item, index) in productdata" :key="index" class="guess-itemF" @click="navToDetailPage(item)">
				<div class="image-wrapperA">
					<img :src="item.goodsMainPhotoUrl" mode="aspectFill" />
				</div>
				<span class="title clamp">{{ item.goodsName }}</span>
				<div class="price">
					<div style="display: inline-block;margin-right: 2px;">
						<span class="tipPrice">￥</span>{{  item.goodsPriceBean.price| priceFilter()}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import activityIcon  from './activity-icon/icon';

export default {
	props: {
		flex: {
			type: String,
			default: "1"
		},
		productdata: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	components: {
		activityIcon
	},
	data() {
		return {};
	},
	methods: {
		goDetail(data) {
			this.$emit('goDetail', data);
		},
		toBuy(data) {
			this.$emit('tuBuy', data);
		},
		navToDetailPage(data) {
			this.$emit('navToDetailPage', data);
		},
	}
};
</script>

<style lang="scss">
/* 内容 */
.bodyD {
	box-sizing: border-box;
	.bigBox {
		padding: 10px 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		.box {
			width: 49%;
			height: 250px;
			background-color: #ffffff;
			margin-bottom: 12px;
			.imgBox {
				width: 100%;
				height: 168px;
				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.titleBox {
				height: 22.5px;
				line-height: 22.5px;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 13px;
				padding: 5px 6px 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				color: #3b3b3b;
			}
			.priceBox {
				display: flex;
				justify-content: flex-start;
				margin:10px 0 0 0;
				padding: 0 3px;
				height:18px;
				.newP {
					font-size: 21px;
					color: #fa436a;
					/*font-weight: 700;*/
					line-height: 23px;
				}
				.oldP {
					font-size: 10px;
					color: #CCCCCC;
					line-height: 25px;
					text-decoration: line-through;
					margin-left: 3px;
				}
			}
		}
	}
	.smallBox {
		padding: 10px 10px;
		.box {
			display: flex;
			justify-content: space-between;
			padding: 10px 10px;
			height: 140px;
			margin-bottom: 10px;
			background-color: #ffffff;
			.imgBox {
				width: 35%;
				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.textBox {
				width: 60%;
				.textTitle {
					height: 44px;
					margin:0 0 10px 0;
					font-size: 16px;
					color: #3b3b3b;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.textPriceZ {
					display: flex;
					font-size: 13px;
					color: #fa436a;
					/*font-weight: 700;*/
					// line-height: 46upx;
					padding: 10px 0px;
				}
				.textPriceY {
					font-size: 16px;
					color: #b6b6b6;
					// line-height: 46upx;
					// margin: 10upx 0upx;
					text-decoration: line-through;
				}
			}
		}
	}
}
.listBox {
	padding: 10px 10px;
	.list {
		/*background-color: #f5f5f5;*/
		height: 134px;
		padding: 7px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		.l_imgBox {
			height: 100%;
			width: 120px;
			background-color: #f8f6fc;
			img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.l_textBox {
			height: 100%;
			width: 60%;
			background-color: #f8f6fc;
			.l_textBoxT {
				height: 42px;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				.l_TextBoxTitle {
					font-weight: 500;
					font-size: 14px;
					color: #333333;
				}
			}

			.l_textBoxPN {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.l_textBoxPNT {
					.l_TextBoxPrice {
						color: #fa436a;
						font-size: 18px;
						line-height: 34px;
					}
					.l_TextBoxNumm {
						font-size: 14px;
						color: #aaa4a4;
						text-decoration: line-through;
					}
				}
				.l_textBoxPNB {
					width: 70px;
					height: 28px;
					background-color:  #fa436a;
					margin-top: 20px;
					font-size: 14px;
					text-align: center;
					line-height: 28px;
					color: #f8f6fc;
					border-radius: 5px 5px;
				}	
			}
		}
	}
}
.listBox1 .list .l_textBox .l_textBoxPN .l_textBoxPNBY{
	background-color: #C0C4CC;
	width: 70px;
	height: 28px;
	background-color: #c0c0c0;
	margin-top: 20px;
	font-size: 19px;
	text-align: center;
	line-height: 28px;
	color: #f8f6fc;
	border-radius: 5px 5px;
	
}
.listBox1 {
	padding: 10px 10px;
	.list {
		// background-color: #F5F5F5;
		height: 134px;
		padding: 7px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		.l_imgBox {
			height: 100%;
			width: 120px;
			// background-color: #F8F6FC;
			img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.l_textBox {
			height: 100%;
			width: 60%;
			// background-color: #F8F6FC;
			.l_textBoxT {
				height: 42px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				.l_TextBoxTitle {
					font-weight: 500;
					font-size: 14px;
					color: #333333;
				}
			}

			.l_textBoxPN {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.l_textBoxPNT {
					.l_TextBoxP {
						.l_TextBoxPrice {
							color: #fa436a;
							font-size: 16px;
							/*font-weight: 700;*/
						}
						.l_TextBoxNumm {
							padding-left: 5px;
							font-size: 14px;
							color: #aaa4a4;
							text-decoration: line-through;
						}
					}
					.l_textBoxPercentage {
					}
				}
				.l_textBoxPNB {
					width: 70px;
					height: 28px;
					background-color: #cccc;
					margin-top: 20px;
					font-size: 16px;
					text-align: center;
					line-height: 28px;
					color: #f8f6fc;
					border-radius: 5px 5px;
				}
			}
		}
	}
}
.listBox2 {
	padding: 10px 10px;
	.list {
		background-color: #f5f5f5;
		height: 134px;
		padding: 7px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		.l_imgBox {
			height: 100%;
			width: 120px;
			background-color: #f8f6fc;
			img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		.l_textBox {
			height: 100%;
			width: 60%;
			background-color: #f8f6fc;
			.l_textBoxT {
				height: 42px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				.l_TextBoxTitle {
					font-weight: 500;
					font-size: 14px;
					color: #333333;
				}
			}
			.l_textBoxPN {
				margin-top: 10px;
				.l_textBoxPNBtn{
					display:flex;
					justify-content:space-between;
					.l_TextBoxPrice {
						color: #fa436a;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
					}
					.l_TextBoxNumm {
						font-weight: 500;
						font-size: 14px;
						color: #aaa4a4;
					}
					.collageBtn{
						width: 70px;
						    height: 28px;
						    background-color: #fa436a;
						    margin-top: 20px;
						    font-size: 14px;
						    text-align: center;
						    line-height: 28px;
						    color: #f8f6fc;
						    border-radius: 5px 5px;	
					}
				}

			}
		}
	}
}
/* 猜你喜欢 */
.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 15px;
	background: #fff;
	.guess-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 20px;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.guess-itemA{
		display: flex;
		flex-direction: column;
		width: 30%;
		height: 100%;
		padding-bottom: 20px;
		&:nth-child(3n+2) {
			margin:0px 5%;
		}
	}
	.guess-itemF{
		display: flex;
		flex-direction: column;
		width: 23%;
		height: 100%;
		padding-bottom: 20px;
		&:nth-child(2) {
			margin-left:2%;
		}
		&:nth-child(3) {
			margin-left:2%;
		}
		&:nth-child(4) {
			margin-left:2%;
		}

	}
	.image-wrapperA{
		width: 100%;
		height: 100px;
		border-radius: 3px;
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
			opacity: 1;
			display: block;
		}	
	}
	.image-wrapper {
		width: 100%;
		height: 165px;
		border-radius: 3px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: 13px;
		color: #303133;
		line-height: 28px;
		display: block;
		height: 28px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price {
		font-size: 16px;
		color: #fa436a;
		line-height: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
}
.tipPrice {
	font-size: 10px;
}
.sideshow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.sideshowList {
	font-size: 10px;
	color: red;
	border: 1px solid red;
	padding: 0 3px;
	margin-right: 4px;
	border-radius: 2px;
}
.guess-item .sideshowList{
	// padding: 4upx 6upx;
}
.activityTip{
	display: flex;
	padding: 0 6px;
	padding-top:10px;
}
.guess-item .activityTip{
	padding-top: 5px;
}
.smallBox .activityTip{
	padding-top:5px;
}
.smallBox .zhdbs2{
	/*margin-top:6px;*/
	font-weight:normal;
}
</style>
